<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="./jquery/jquery.min.js"></script>
<script src="./jquery/jquery.validate.min.js"></script>
<script src="./jquery/messages_zh.min.js"></script>
<script>

// $.validator.setDefaults({
//     submitHandler: function(form) {
//       alert("提交事件!");
//     }
// });

jQuery.validator.addMethod("validateAge", function(value, element) {   
    return value >= 18
}, "您必须年满18岁");

$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
  $("#signupForm").validate({

      // 校验规则
	    rules: {

        // firstname是必须的
	      firstname: "required",
	      lastname: "required",

        // 用户名的规则：必须填 + 最少2字符
	      username: {
	        required: true,
          // 用户名的最小长度为2
	        minlength: 2
	      },

	      password: {
	        required: true,
	        minlength: 5
	      },

	      age: {
          validateAge:true,
	      },

	      email: {
	        required: true,
	        email: true
	      },

	      "topic[]": {
	        required: "#newsletter:checked",
	        minlength: 2
	      },
	      agree: "required"
	    },
	    
      // 提示信息和校验规则是对称的
      messages: {

        // 如果没有填姓、名提示信息是什么
	      firstname: "请输入您的芳名",
	      lastname: "请输入您的姓氏",

        // 用户名不符合规则时的提示信息
	      username: {
	        required: "请输入用户名",
	        minlength: "用户名必需由两个字母组成"
	      },

	      password: {
	        required: "请输入密码",
	        minlength: "密码长度不能小于 5 个字母"
	      },
	      confirm_password: {
	        required: "请输入密码",
	        minlength: "密码长度不能小于 5 个字母",
	        equalTo: "两次密码输入不一致"
	      },
	      email: "请输入一个正确的邮箱",
	      agree: "请接受我们的声明",
	      topic: "请选择两个主题"
	    },
	
      submitHandler:function(form){
        // console.log(form);  
        
        // 将表单中的数据序列化（serialize） 拼接为http请求的参数 &username=abc&password=123456....
        console.log($(form).serialize());
        // form.submit();
        alert("提交劳资的事件!");
      } 
    });
});

</script>

<style>
.error{
	color:red;
  font-style: italic;
}
</style>

</head>
<body>
<form class="cmxform" id="signupForm" method="get" action="">
  <fieldset>
    <legend>验证完整的表单</legend>
    <p>
      <label for="firstname">名字</label>
      <input id="firstname" name="firstname" type="text">
    </p>
    <p>
      <label for="lastname">姓氏</label>
      <input id="lastname" name="lastname" type="text">
    </p>
    <p>
      <label for="username">用户名</label>
      <input id="username" name="username" type="text">
    </p>
    <p>
      <label for="password">密码</label>
      <input id="password" name="password" type="password">
    </p>
    <p>
      <label for="age">年龄</label>
      <input id="age" name="age" type="text">
    </p>
    <p>
      <label for="email">Email</label>
      <input id="email" name="email" type="email">
    </p>
    <p>
      <label for="agree">请同意我们的声明</label>
      <input type="checkbox" class="checkbox" id="agree" name="agree">
    </p>
    <p>
      <label for="newsletter">我乐意接收新信息</label>
      <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
    </p>
    <fieldset id="newsletter_topics">
      <legend>主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见</legend>
      <label for="topic_marketflash">
        <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic[]">Marketflash
      </label>
      <label for="topic_fuzz">
        <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic[]">Latest fuzz
      </label>
      <label for="topic_digester">
        <input type="checkbox" id="topic_digester" value="digester" name="topic[]">Mailing list digester
      </label>
      <label for="topic" class="error" style="display:none">至少选择两个</label>
    </fieldset>
    <p>
      <input class="submit" type="submit" value="提交">
    </p>
  </fieldset>
</form>

</body>
</html>
